{% load static %}
<!DOCTYPE html>
<html>

{% include 'nav.html' %}

<body>

<!-- Side Navbar -->
{% block usershow %}
    <nav class="side-navbar">
        <div class="side-navbar-wrapper">
            <!-- Sidebar Header    -->
            <div class="sidenav-header d-flex align-items-center justify-content-center">
                <!-- User Info-->
                <div class="sidenav-header-inner text-center"><img src="{% static '/img/avatar-7.jpg' %}  " alt="person"
                                                                   class="img-fluid rounded-circle">
                    <h2 class="h5">Nathan Andrews</h2><span>Web Developer</span>
                </div>
                <!-- Small Brand information, appears on minimized sidebar-->
                <div class="sidenav-header-logo"><a href="index.html" class="brand-small text-center">
                    <strong>B</strong><strong class="text-primary">D</strong></a></div>
            </div>
            <!-- Sidebar Navigation Menus-->

            {% include 'mainmenu.html' %}

            <div class="admin-menu">
                <h5 class="sidenav-heading">Second menu</h5>
                <ul id="side-admin-menu" class="side-menu list-unstyled">
                    <li><a href="#"> <i class="icon-screen"> </i>Demo</a></li>
                    <li><a href="#"> <i class="icon-flask"> </i>Demo
                        <div class="badge badge-info">Special</div>
                    </a></li>
                    <li><a href=""> <i class="icon-flask"> </i>Demo</a></li>
                    <li><a href=""> <i class="icon-picture"> </i>Demo</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="page">
    <!-- navbar-->
    <header class="header">
        <nav class="navbar">
            <div class="container-fluid">
                <div class="navbar-holder d-flex align-items-center justify-content-between">
                    <div class="navbar-header"><a id="toggle-btn" href="#" class="menu-btn"><i
                            class="icon-bars"> </i></a><a href="index.html" class="navbar-brand">
                        <div class="brand-text d-none d-md-inline-block"><span>Bootstrap </span><strong
                                class="text-primary">Dashboard</strong></div>
                    </a></div>
                    <ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
                        <!-- Notifications dropdown-->
                        <li class="nav-item dropdown"><a id="notifications" rel="nofollow" data-target="#" href="#"
                                                         data-toggle="dropdown" aria-haspopup="true"
                                                         aria-expanded="false" class="nav-link"><i
                                class="fa fa-bell"></i><span class="badge badge-warning">12</span></a>
                            <ul aria-labelledby="notifications" class="dropdown-menu">
                                <li><a rel="nofollow" href="#" class="dropdown-item">
                                    <div class="notification d-flex justify-content-between">
                                        <div class="notification-content"><i class="fa fa-envelope"></i>You have 6
                                            new
                                            messages
                                        </div>
                                        <div class="notification-time">
                                            <small>4 minutes ago</small>
                                        </div>
                                    </div>
                                </a></li>
                                <li><a rel="nofollow" href="#" class="dropdown-item">
                                    <div class="notification d-flex justify-content-between">
                                        <div class="notification-content"><i class="fa fa-twitter"></i>You have 2
                                            followers
                                        </div>
                                        <div class="notification-time">
                                            <small>4 minutes ago</small>
                                        </div>
                                    </div>
                                </a></li>
                                <li><a rel="nofollow" href="#" class="dropdown-item">
                                    <div class="notification d-flex justify-content-between">
                                        <div class="notification-content"><i class="fa fa-upload"></i>Server
                                            Rebooted
                                        </div>
                                        <div class="notification-time">
                                            <small>4 minutes ago</small>
                                        </div>
                                    </div>
                                </a></li>
                                <li><a rel="nofollow" href="#" class="dropdown-item">
                                    <div class="notification d-flex justify-content-between">
                                        <div class="notification-content"><i class="fa fa-twitter"></i>You have 2
                                            followers
                                        </div>
                                        <div class="notification-time">
                                            <small>10 minutes ago</small>
                                        </div>
                                    </div>
                                </a></li>
                                <li><a rel="nofollow" href="#" class="dropdown-item all-notifications text-center">
                                    <strong> <i class="fa fa-bell"></i>view all notifications </strong></a></li>
                            </ul>
                        </li>
                        <!-- Messages dropdown-->
                        <li class="nav-item dropdown"><a id="messages" rel="nofollow" data-target="#" href="#"
                                                         data-toggle="dropdown" aria-haspopup="true"
                                                         aria-expanded="false" class="nav-link"><i
                                class="fa fa-envelope"></i><span class="badge badge-info">10</span></a>
                            <ul aria-labelledby="notifications" class="dropdown-menu">
                                <li><a rel="nofollow" href="#" class="dropdown-item d-flex">
                                    <div class="msg-profile"><img src="{% static 'img/avatar-1.jpg' %}" alt="..."
                                                                  class="img-fluid rounded-circle"></div>
                                    <div class="msg-body">
                                        <h3 class="h5">Jason Doe</h3><span>sent you a direct message</span>
                                        <small>3
                                            days
                                            ago at 7:58 pm - 10.06.2014
                                        </small>
                                    </div>
                                </a></li>
                                <li><a rel="nofollow" href="#" class="dropdown-item d-flex">
                                    <div class="msg-profile"><img src="{% static 'img/avatar-2.jpg' %}" alt="..."
                                                                  class="img-fluid rounded-circle"></div>
                                    <div class="msg-body">
                                        <h3 class="h5">Frank Williams</h3>
                                        <span>sent you a direct message</span>
                                        <small>3
                                            days ago at 7:58 pm - 10.06.2014
                                        </small>
                                    </div>
                                </a></li>
                                <li><a rel="nofollow" href="#" class="dropdown-item d-flex">
                                    <div class="msg-profile"><img src="{% static 'img/avatar-3.jpg' %}" alt="..."
                                                                  class="img-fluid rounded-circle"></div>
                                    <div class="msg-body">
                                        <h3 class="h5">Ashley Wood</h3><span>sent you a direct message</span>
                                        <small>3
                                            days ago at 7:58 pm - 10.06.2014
                                        </small>
                                    </div>
                                </a></li>
                                <li><a rel="nofollow" href="#" class="dropdown-item all-notifications text-center">
                                    <strong> <i class="fa fa-envelope"></i>Read all messages </strong></a></li>
                            </ul>
                        </li>
                        <!-- Languages dropdown    -->
                        <li class="nav-item dropdown"><a id="languages" rel="nofollow" data-target="#" href="#"
                                                         data-toggle="dropdown" aria-haspopup="true"
                                                         aria-expanded="false"
                                                         class="nav-link language dropdown-toggle"><img
                                src="{% static 'img/flags/16/GB.png' %}" alt="English"><span
                                class="d-none d-sm-inline-block">English</span></a>
                            <ul aria-labelledby="languages" class="dropdown-menu">
                                <li><a rel="nofollow" href="#" class="dropdown-item"> <img
                                        src="{% static 'img/flags/16/DE.png' %}"
                                        alt="English"
                                        class="mr-2"><span>German</span></a>
                                </li>
                                <li><a rel="nofollow" href="#" class="dropdown-item"> <img
                                        src="{% static 'img/flags/16/FR.png' %}"
                                        alt="English"
                                        class="mr-2"><span>French                                                         </span></a>
                                </li>
                            </ul>
                        </li>
                        <!-- Log out-->
                        <li class="nav-item"><a href="login.html" class="nav-link logout"> <span
                                class="d-none d-sm-inline-block">Logout</span><i class="fa fa-sign-out"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
{% endblock %} <!--blockusershow-->
{% block content %}
    <!-- Counts Section -->
    <section class="dashboard-counts section-padding">
        <div class="container-fluid">
            <div class="row">
                <!-- Count item widget-->
                <div class="col-xl-2 col-md-4 col-6">
                    <div class="wrapper count-title d-flex">
                        <div class="icon"><i class="icon-user"></i></div>
                        <div class="name"><strong class="text-uppercase">New
                            Clients</strong><span>Last 7 days</span>
                            <div class="count-number">25</div>
                        </div>
                    </div>
                </div>
                <!-- Count item widget-->
                <div class="col-xl-2 col-md-4 col-6">
                    <div class="wrapper count-title d-flex">
                        <div class="icon"><i class="icon-padnote"></i></div>
                        <div class="name"><strong class="text-uppercase">Work
                            Orders</strong><span>Last 5 days</span>
                            <div class="count-number">400</div>
                        </div>
                    </div>
                </div>
                <!-- Count item widget-->
                <div class="col-xl-2 col-md-4 col-6">
                    <div class="wrapper count-title d-flex">
                        <div class="icon"><i class="icon-check"></i></div>
                        <div class="name"><strong class="text-uppercase">New
                            Quotes</strong><span>Last 2 months</span>
                            <div class="count-number">342</div>
                        </div>
                    </div>
                </div>
                <!-- Count item widget-->
                <div class="col-xl-2 col-md-4 col-6">
                    <div class="wrapper count-title d-flex">
                        <div class="icon"><i class="icon-bill"></i></div>
                        <div class="name"><strong class="text-uppercase">New
                            Invoices</strong><span>Last 2 days</span>
                            <div class="count-number">123</div>
                        </div>
                    </div>
                </div>
                <!-- Count item widget-->
                <div class="col-xl-2 col-md-4 col-6">
                    <div class="wrapper count-title d-flex">
                        <div class="icon"><i class="icon-list"></i></div>
                        <div class="name"><strong class="text-uppercase">Open
                            Cases</strong><span>Last 3 months</span>
                            <div class="count-number">92</div>
                        </div>
                    </div>
                </div>
                <!-- Count item widget-->
                <div class="col-xl-2 col-md-4 col-6">
                    <div class="wrapper count-title d-flex">
                        <div class="icon"><i class="icon-list-1"></i></div>
                        <div class="name"><strong class="text-uppercase">New
                            Cases</strong><span>Last 7 days</span>
                            <div class="count-number">70</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="tlinks">Collect from <a href="http://www.cssmoban.com/" title="网站模板">网站模板</a></div>
    <!-- Header Section-->

    <section class="dashboard-header section-padding">
    <div class="container-fluid">
        <div class="row d-flex align-items-md-stretch">
            <!-- To Do List-->
            <div class="col-lg-3 col-md-6">
                <div class="card to-do">
                    <h2 class="display h4">To do List</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    <ul class="check-lists list-unstyled">
                        <li class="d-flex align-items-center">
                            <input type="checkbox" id="list-1" name="list-1" class="form-control-custom">
                            <label for="list-1">Similique sunt in culpa qui officia</label>
                        </li>
                        <li class="d-flex align-items-center">
                            <input type="checkbox" id="list-2" name="list-2" class="form-control-custom">
                            <label for="list-2">Ed ut perspiciatis unde omnis iste</label>
                        </li>
                        <li class="d-flex align-items-center">
                            <input type="checkbox" id="list-3" name="list-3" class="form-control-custom">
                            <label for="list-3">At vero eos et accusamus et iusto </label>
                        </li>
                        <li class="d-flex align-items-center">
                            <input type="checkbox" id="list-4" name="list-4" class="form-control-custom">
                            <label for="list-4">Explicabo Nemo ipsam voluptatem</label>
                        </li>
                        <li class="d-flex align-items-center">
                            <input type="checkbox" id="list-5" name="list-5" class="form-control-custom">
                            <label for="list-5">Similique sunt in culpa qui officia</label>
                        </li>
                        <li class="d-flex align-items-center">
                            <input type="checkbox" id="list-6" name="list-6" class="form-control-custom">
                            <label for="list-6">At vero eos et accusamus et iusto </label>
                        </li>
                        <li class="d-flex align-items-center">
                            <input type="checkbox" id="list-7" name="list-7" class="form-control-custom">
                            <label for="list-7">Similique sunt in culpa qui officia</label>
                        </li>
                        <li class="d-flex align-items-center">
                            <input type="checkbox" id="list-8" name="list-8" class="form-control-custom">
                            <label for="list-8">Ed ut perspiciatis unde omnis iste</label>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
{% endblock %}
<!-- JavaScript files-->
{% include 'bottom_js.html' %}

</body>
</html>
